<template>
  <div class="user-table">
    <el-table :data="usersList" :border="true" style="width: 100%">
      <el-table-column align="center" type="selection" label="选择" />
      <el-table-column align="center" type="index" label="序号" width="80" />
      <el-table-column align="center" prop="name" label="用户名" width="180" />
      <el-table-column align="center" prop="realname" label="真实姓名" width="180" />
      <el-table-column align="center" prop="cellphone" label="手机号码" width="180" />
      <el-table-column align="center" prop="enable" label="状态" width="120">
        <template #default="scope">
          <el-button :type="scope.row.enable ? 'success' : 'danger'" plain size="small">
            {{ scope.row.enable ? "启用" : "禁用" }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createAt" label="创建时间">
        <template #default="scope">
          {{ formatUTC(scope.row.createAt) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="updateAt" label="更新时间">
        <template #default="scope">
          {{ formatUTC(scope.row.updateAt) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="180">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            icon="EditPen"
            link
            @click="handleEditClick(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            icon="Delete"
            link
            @click="handleDeleteClick(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {formatUTC} from "@/utils/format";
import {deleteUserByIdAPI} from "@/services/modules/main/system/system.ts";

const { usersList = [] } = defineProps(["usersList"]);
const handleEditClick = () => {};
const emit = defineEmits(['delete-click'])
const handleDeleteClick = async (id) => {
  const result = await deleteUserByIdAPI(id);
  if (result === 0) {
    ElMessage.success("删除成功");
  }
  emit('delete-click')
};
</script>

<style lang="less" scoped>
.user-table {
  margin-top: 10px;
}
</style>
